// src/components/sidebar.jsx
'use client';
import Image from 'next/image'
import React from 'react';
import SidebarMenuItem from "@/app/forum/_components/sidebarMenuItem";
import {HomeIcon} from '@heroicons/react/solid'
import {
    HashtagIcon,
    InboxIcon,
    BellIcon,
    BookmarkIcon,
    ClipboardIcon,
    UserIcon,
    DotsCircleHorizontalIcon
} from '@heroicons/react/outline'
import {auth} from "@/auth";
import {Avatar, AvatarFallback, AvatarImage} from "@/components/ui/avatar";
import {useCurrentUser} from "@/hooks/use-current-user";
import {DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger} from "@/components/ui/dropdown-menu";
import Link from "next/link";
import {LogOut} from "lucide-react";

const Sidebar = () => {
    const user = useCurrentUser()

    return (
        <div className={'hidden sm:flex flex-col p-2 xl:items-start fixed h-full xl:ml-24'}>
            {/*logo*/}
            <div className={`mt-4 ml-auto hoverEffect p-0 hover:bg-blue-100 xl:px-1 rounded-full`}>
                <Image
                    // className={`rounded-full`}
                    // src={'/forum/twitter-color-svgrepo-com.svg'}
                    src={'/logoipsum-343.svg'}
                    alt={'logo'}
                    width={200}
                    height={50}
                />
            </div>

            {/*menu*/}
            <div className={'mt-4 mb-2.5 xl:items-start'}>
                <Link href={`/`}>
                    <SidebarMenuItem text={'Home'} Icon={HomeIcon} active/>
                </Link>
                <SidebarMenuItem text={'Explore'} Icon={HashtagIcon}/>
                <SidebarMenuItem text={'Notifications'} Icon={BellIcon}/>
                <Link href={`/social`}>
                    <SidebarMenuItem text={'Messages'} Icon={InboxIcon}/>
                </Link>
                <SidebarMenuItem text={'Bookmarks'} Icon={BookmarkIcon}/>
                <SidebarMenuItem text={'Lists'} Icon={ClipboardIcon}/>
                <SidebarMenuItem text={'Profile'} Icon={UserIcon}/>
                <SidebarMenuItem text={'More'} Icon={DotsCircleHorizontalIcon}/>
            </div>

            {/*button*/}
            <button
                className={`
                bg-blue-400 text-white rounded-full w-56 h-12 font-bold shadow-md
                hover:brightness-95 text-lg hidden xl:inline 
                `}
            >就业交流论坛
            </button>
            {/*<button*/}
            {/*    className={`*/}
            {/*    bg-blue-400 text-white rounded-full w-56 h-12 font-bold shadow-md*/}
            {/*    hover:brightness-95 text-lg hidden xl:inline */}
            {/*    `}*/}
            {/*>Login*/}
            {/*</button>*/}

            {/*mini-profile*/}
            <div className={'hoverEffect text-gray-700 flex items-center justify-center xl:justify-start mt-auto'}>
                <Avatar className={`size-10 rounded-full xl:mr-2`}>
                    <AvatarImage className={`rounded-full`} src={user?.image}/>
                    <AvatarFallback className={`bg-blue-400 text-white rounded-full`}>
                        {user.name.charAt(0).toUpperCase()}
                    </AvatarFallback>
                </Avatar>
                {/*<img src={session.user.image} alt="user"*/}
                {/*     className={'size-10 rounded-full xl:mr-2'}/>*/}
                <div className={'leading-5 hidden xl:inline'}>
                    <h4 className={'font-bold'}>{user.name}</h4>
                    <p className={'text-gray-500'}>@{user.name}</p>
                </div>
                <DropdownMenu modal={false}>
                    <DropdownMenuTrigger className={`outline-none relative`}>
                        <DotsCircleHorizontalIcon className={'h-5 xl:ml-8 hidden xl:inline'}/>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align={'center'} side={'right'} className={'w-60'}>
                        <Link href={'/api/auth/signout'}>
                            <DropdownMenuItem className={`h-10`}>
                                <LogOut className={`size-4 mr-2`}/>
                                退出登录
                            </DropdownMenuItem>
                        </Link>
                    </DropdownMenuContent>
                </DropdownMenu>
            </div>
        </div>
    );
};

export default Sidebar;